<template>
    <div class="attachment-root">
        <a v-if="href" @click="$oss.downAndOpen(href)" style="display: flex;align-items: center">
            <img style="width: 32px;height:32px;" :src="downloadIcon" alt="下载附件简历"/>
            <div style="width: fit-content;display: flex;">{{msg}}</div>
        </a>
        <p v-if="!href">{{msg}}</p>
    </div>
</template>

<script>

  export default {
    name: 'attachment',
    props: {
      talentId: {
        type: Number,
        default: 0
      }
    },
    watch: {
      talentId: {
        immediate: true,
        handler(n) {
          console.log('start load attachment')
          this.msg = '检索中'
          this.loadAttachment(n)
        }
      }
    },
    data() {
      return {
        downloadIcon: require('@/assets/img/communication/download.png'),
        href: null,
        msg: '检索中'
      }
    },
    methods: {
      loadAttachment(id) {
        this.lAxios({
          method: 'post', //方法
          url: '/platform/selectattachResume.do',
          params: { 'talentId': id }
        }).then(res => {
          res = res.data
          console.log('load attachment result', res)
          if (res) {
            if (res.status === 0) {
              const response = res.data
              console.log('attachment', response)
              this.href = response
              this.msg = '下载附件简历'
            } else if (res.status === 1) {
              this.href = null
              this.msg = '暂无附件简历'
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
    .attachment-root {

        width: 100%;
        height: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        /*margin-top: 30px;*/

        @mixin comm-background {
            width: 240px;
            height: 40px;
            background: #009944;
            color: #fff;
            border: 1px solid #009944;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        a {
            @include comm-background;

            text-decoration: none;

            &:hover {
                color: #fff;
            }

            &:visited {
                color: #fff;
            }

        }

        p {
            @include comm-background;
        }
    }
</style>
